/**
 * Default style sheet
 */


/** ELEMENTS */

body {
    background-color: #336;
    margin: 0px;
    padding: 0px;
    font-size: smaller;
    /*0.8em;*/
    font-family: sans-serif;
    color: #fff;
}

p {
    color: #fff;
}

p.comment,
td.comment_cell {
    color: #aff;
}

table {
    border: 1px gray solid;
}

body.browser {
    background-color: #447;
    color: #4bf;
    font-size: smaller;
    /*1em;*/
    border-right: 1px dashed #c0c0c0;
}

body.browser a {
    color: #fff;
}

body.browser a:hover {
    color: #cde;
}

body.browser div.webfx-tree-row:hover {
    background: #88d
}

h2 {
    color: #fff;
    font-size: medium;
    /*1.3em;*/
    font-weight: bold;
    border: 0;
    background-color: #558;
    padding: 0;
    margin: 0;
    text-align: center;
}

h3 {
    color: #eee;
    font-size: small;
    font-weight: bold;
}

table.error {
    background-color: #f00
}

table.error td {
    background-color: #f84
}

th.data {
    color: #ada;
    background-color: #241;
    font-size: smaller;
    /* 0.9em */
}

th.data a:active,
th.data a:link,
th.data a:visited,
th.data a:hover {
    font-weight: bold;
    display: block;
}

td.dat {
    color: #ff0;
    text-align: center;
}

th.required {
    text-decoration: underline
}

ul.toplink,
ul.navlink {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.navlink {
    margin: 20px 0
}

ul.toplink li,
ul.navlink li {
    display: inline;
    border-left: 1px solid #eee;
    margin: 0;
    padding: 0 2px 0 5px;
}

ul.toplink li:first-child,
ul.navlink li:first-child {
    border: none;
    padding-left: 0;
}

tr.data1,
tr.data2,
tr.data3 {
    color: #eed;
    font-family: sans-serif;
    font-size: smaller;
    /*0.8em;*/
}

tr.data1:hover,
tr.data2:hover,
tr.data3:hover {
    background-color: #39663e;
}

.row1,
.data1 {
    background-color: #2b482e;
    text-align: left;
}

input,
textarea,
select {
    border: 1px #200 solid;
    background: #ddf;
}

input,
textarea,
select {
    color: #210;
}

td label {
    display: table;
    text-align: center;
    height: 100%;
    width: 100%;
    border-collapse: collapse;
}

td label span {
    display: table-cell;
    vertical-align: middle;
}

.data1 select,
.data2 select {
    font-weight: bold;
}

p input:focus,
.data input:focus,
.data1 input:focus,
.data2 input:focus,
textarea:focus,
.data1 select,
.data2 select {
    /*  background:#bbf;    */
    background: #eef;
    color: #000;
}

.row2,
.data2 {
    background-color: #1a3f1e;
    text-align: left;
}

td.opbutton1 {
    border: 1px solid #484;
    font-size: smaller;
    /*0.8em;*/
    text-align: center;
}

td.opbutton2 {
    border: 1px solid #484;
    font-size: smaller;
    /*0.8em;*/
    text-align: center;
}

td.opbutton1 a,
td.opbutton2 a {
    padding-left: 6px;
    padding-right: 6px;
}

.topbar {
    border: 0
}

.topbar,
.topbar *,
.trail,
.tab,
.crumb {
    border: 0;
    background: #336;
}

.topbar .platform,
.topbar .host,
.topbar .username {
    font-weight: bold;
}

.topbar,
.trail,
.tab {
    padding: 2px 1ex;
    font-size: smaller;
    color: #ddf;
}

.crumb,
.tab {
    vertical-align: top;
}

.crumb .icon {
    vertical-align: middle;
    margin: 0;
}

table.tabs {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1ex;
}

.tab {
    text-align: center
}

.tabs .active {
    background-color: #449
}

.tab .icon {
    display: block
}

tr,
td {
    height: 100%
}

td:not(.constraint_cell) a:not(.help),
th a {
    display: inline-block;
    height: 100%
}


/* vertical-align:middle doesn't work for block elements, CSS sux */

td.crumb a,
td.tab a {
    width: 90%
}

tr.data1 a,
tr.data2 a {
    width: 100%
}

td.opbutton1 a,
td.opbutton2 a {
    width: inherit
}

td a.help {
    display: inline;
    position: absolute;
    width: 10px;
}

a.pagenav {
    display: inline-block;
    min-width: 15px;
}

a.toplink {
    display: inline
}

a:active {
    color: #989973;
    font-weight: normal;
    text-decoration: underline;
}

a,
a:link {
    color: #afa;
    text-decoration: none;
}

a:visited {
    color: #df8;
    text-decoration: none;
}

a:hover {
    color: #f88;
    text-decoration: none;
}

a:active {
    color: #c00;
}

a.navlink:link,
a.toplink:link,
ul.navlink li a,
ul.toplink li a {
    color: #afa;
    font-weight: bold;
    text-decoration: none;
}

a.navlink:visited,
a.toplink:visited,
ul.navlink li a:visited,
ul.toplink li a:visited {
    color: #df8;
    font-weight: bold;
    text-decoration: none;
}

a.navlink:hover,
a.toplink:hover,
ul.navlink li a:hover,
ul.toplink li a:hover {
    color: red;
    font-weight: bold;
    text-decoration: none;
}

a.navlink:active,
a.toplink:active,
ul.navlink li a:active,
ul.toplink li a:active {
    color: #c00;
    font-weight: bold;
    text-decoration: none;
}

.active a {
    font-weight: bold
}

a.help {
    color: #E68800;
    font-size: smaller;
    vertical-align: super;
    text-decoration: none;
}

pre {
    font-size: 110%
}

pre.data {
    font-size: 100%;
}

.error p {
    color: #822;
    background: #fc8;
}

pre.error {
    color: #000;
    font-family: monospace;
    font-size: 120%;
}

.intro li {
    font-weight: bold
}

.ac_field {
    border: 1px solid #D9D95F
}

.bottom_link {
    color: #004 !important;
    background: #eee;
    border-top: 1px dotted #999;
    border-left: 1px dotted #999;
    font-size: smaller;
}

a.bottom_link:hover {
    background: #68f
}


/** FK browsing **/

div#root>div.fk {
    border: 1px solid #000;
}

div.fk {
    /*background: #84c;*/
    background: rgba(128, 32, 64, 0.6);
    border-left: 1px solid #000;
    padding: 5px 0 5px 0;
}

div.logo {
    display: none
}

div.logo a {
    display: block;
    height: 100%;
    color: transparent:
}